<template>
  <div class="form-table">
    <div class="form-table__head">
      <div class="form-table__tr">
        <div
          v-for="(item, index) in columns"
          :key="index"
          class="form-table__td"
          :style="{ width: getWidth(item.width) }"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="form-table__body">
      <el-form-item
        v-for="(item, index) in props.data"
        :key="index"
        :prop="ruleProp ? `${ruleProp}.${index}` : void 0"
        :rules="rule"
        class="form-table__tr"
      >
        <slot v-bind="{ row: item, $index: index }"></slot>
      </el-form-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormItemRule } from 'element-plus'

import { getWidth, useFormTable } from './useFormTable'

interface IProps {
  data: any[]
  ruleProp?: string
  rule?: FormItemRule
}

const props = defineProps<IProps>()

const { columns } = useFormTable(props)
</script>

<style lang="scss">
.form-table {
  width: 100%;
  .form-table__head {
    color: #868d9d;
    .form-table__td {
      font-weight: 400;
      padding-bottom: 8px;
    }
  }

  .form-table__body {
    .form-table__tr {
      padding-bottom: 16px;
      .form-table__td {
        padding-right: 16px;
      }
    }
  }

  .form-table__tr {
    display: flex;
  }
}
</style>
